<script>
import { defineComponent, onMounted, ref } from 'vue';

import { Input } from 'ant-design-vue';

import getPurchaseBomDetailList from './getPurchaseBomDetailList.vue';

import 'dayjs/locale/zh-cn';
// 导入所需的语言包
export default defineComponent({
  components: {
    Input,
    GetPurchaseBomDetailList: getPurchaseBomDetailList,
  },
  props: {
    params: Object,
  },
  setup(props) {
    const purchaseBomRef = ref(null);
    const value = ref(props.params?.value ?? '');

    const getValue = () => value.value;

    const onClear = (e) => {};

    const onClick = () => {
      // 调用子组件暴露的openModal方法
      purchaseBomRef.value?.openModal();
    };

    const ModelClose = (row) => {
      value.value = row.material?.material_name;
      props.params.data.id = row.purchase_bom_detail_id;
      props.params.data.purchase_sn = row.purchase.purchase_sn;
      props.params.data.caigou_id = row.purchase.caigou_id;
      props.params.data.confirm_num = row.confirm_num;
      props.params.data.price = row.price;
      props.params.data.dead_line = new Date(row.dead_line);
      props.params.api.stopEditing();
    };

    onMounted(() => {
      // 可以在这里执行挂载时的逻辑
    });

    return {
      purchaseBomRef,
      value,
      getValue,
      onClear,
      onClick,
      ModelClose,
    };
  },
});
</script>

<template>
  <div
    style="
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    "
  >
    <Input
      v-model:value="value"
      style="width: 100%; height: 100%"
      placeholder="请选择物料"
      allow-clear
      @click="onClick"
      @clear="onClear"
    />
    <GetPurchaseBomDetailList ref="purchaseBomRef" @push-data="ModelClose" />
  </div>
</template>

<style scoped>
input {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
</style>
